<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/main.css" />

</head>

<body style="background: #fff;">
  <div class="container">

      <ul class="wx02 white-bg wx02-first wx001">
          <li>
              <span class="input-title icon-title" style="background: url(images/001-01.png) left center no-repeat;background-size: 35%;">城区</span>
              <span class="no-text jiantou">周一,周二,周三</span>
          </li>
          <li>
              <span class="input-title icon-title" style="background: url(images/001-02.png) left center no-repeat;background-size: 35%;">高速</span>
              <span class="no-text jiantou">周一,周二,周三</span>
          </li>
          <li>
              <span class="input-title icon-title" style="background: url(images/001-03.png) left center no-repeat;background-size: 35%;">车站</span>
              <span class="no-text jiantou">周一,周二,周三</span>
          </li>
          <li style="border-bottom: 1px solid #DCDDDD;padding-bottom: 15px;">
              <span class="input-title icon-title" style="background: url(images/001-04.png) left center no-repeat;background-size: 35%;">路况</span>
              <span class="no-text jiantou">周一,周二,周三</span>
          </li>

      </ul>
      <div class="wx01-title white-bg overflow" style="margin: 0px;font-size: 18px;padding: 0px;padding-left: 10px;">
          <div class="clear">热门收藏</div>

      </div>
      <ul class="wx02 white-bg wx05-four overflow" style="margin-top: 0">
          <div class="loading-warp">
              <div class="box">
                  <div>
                      <img src="images/loading.gif" />
                      <span class="text">下拉开始刷新</span>
                  </div>
              </div>
          </div>
          <li>
              <div class="top">
                  <img class="pic" src="images/05-01.png">
              </div>
              <p>G8成渝段</p>
              <p>请杠-永川-荣昌-内江</p>
          </li>
          <li>
              <div class="top">
                  <img class="pic" src="images/05-01.png">
              </div>
              <p>G8成渝段</p>
              <p>请杠-永川-荣昌-内江</p>
          </li>
          <li>
              <div class="top">
                  <img class="pic" src="images/05-01.png">
              </div>
              <p>G8成渝段</p>
              <p>请杠-永川-荣昌-内江</p>
          </li>
          <li>
              <div class="top">
                  <img class="pic" src="images/05-01.png">
              </div>
              <p>G8成渝段</p>
              <p>请杠-永川-荣昌-内江</p>
          </li>

          <li class="last overflow">

          </li>
      </ul>
  </div>

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript" src="js/touche.js"></script>
<script type="text/javascript" src="js/p-pull-refresh.js"></script>
<script type="text/javascript">
    var $statu = $('.loading-warp .text');

    var pullRefresh = $('.wx05-four').pPullRefresh({
        $el: $('.wx05-four'),
        $loadingEl: $('.loading-warp'),
        sendData: null,
        url: 'api.php',
        callbacks: {
            pullStart: function(){
                $statu.text('松开开始刷新');
            },
            start: function(){
                $statu.text('数据刷新中···');
            },
            success: function(response){
                $statu.text('数据刷新成功！');
            },
            end: function(){
                $statu.text('下拉刷新结束');
            },
            error: function(){
                $statu.text('找不到请求地址,数据刷新失败');
            }
        }
    });
    $(function(){
        $(".wx02-first li" ).click(function(){
            $(this ).find(".icon-title" ).css('color','#ccc')
        })
    })
    // pullRefresh.setDestroy(true);

</script>
</body>
</html>